<!--
 * @Author: 清香白莲 1243327527@qq.com
 * @Date: 2023-09-06 17:32:52
 * @LastEditors: 清香白莲 1243327527@qq.com
 * @LastEditTime: 2023-09-07 16:56:54
 * @FilePath: /shang_study/src/pages/Detail/Carousel/Carousel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
        <swiper-slide class="swiper_slide_item" v-for="(carousel, index) in bannerList" :key="index">
            <img :src="carousel.imgUrl" @click="handler(index)" :class="{ active: currentIndex == index }">
        </swiper-slide>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-scrollbar" slot="scrollbar"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>

<script>
export default {
    name: 'carousel',
    data() {
        return {
            currentIndex: 0,
            //swiperOption：swiper配置项信息，需要绑定在swiper标签的 :option 属性中
            swiperOption: {
                //幻灯片放映方向
                direction: 'horizontal', //通常不与左右按钮一同使用

                //分页器配置项
                pagination: {
                    el: ".swiper-pagination", //分页器的类名
                    clickable: true, // 点击分页器跳切换到相应的幻灯片
                    type: 'bullets', //小圆点|进度条|数字页码
                    dynamicBullets: true,  //动态小圆点(type:'bullets'时)
                    //自定义分页器，需设置样式
                    renderBullet(index, className) {
                        return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
                    },
                },

                //前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },

                //滚动条
                // scrollbar: {
                //     el: '.swiper-scrollbar',
                //     hide: true
                // },

                //幻灯片播放配置项
                loop: true, //是否循环播放
                speed: 1000, // 发生页面切换动画时，动画的切换速度
                // autoplay: {
                //     delay: 2000, // 幻灯片停留时间
                //     disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
                //     stopOnLastSlide: true, // 切换到最后一个slide时是否停止自动切换。（loop模式下无效）。
                // },
                on: {
                    slideChangeTransitionEnd: function () {
                        //每次切换结束时，在控制台打印现在是第几个slide
                    },
                },
            },
        }
    },
    props: ['bannerList'],
    methods: {
        handler(index) {
            console.log('点击' + index);
        },
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        },
    },
    mounted() {
    },
}
</script>

<style scoped lang="less">
// .center {
//     // box-sizing: border-box;
//     // width: 740px;
//     // height: 100%;
//     // padding: 5px;
//     // float: left;

//     // 自定义分页器样式
//     #mySwiper /deep/ .swiper-pagination-bullet-custom.swiper-pagination-bullet {
//         width: 10px !important;
//         height: 10px !important;
//     }
// }
</style>

